<template>
  <div>
    <div>父组件</div>

    <div>
      <!-- 样式属性会传递，并且会合并 -->
      <!-- 点击事件会触发，由内而外，与JS的冒泡事件效果一致 -->
      <CustomButtonVue class="bigSize" @click="message"></CustomButtonVue>
    </div>
    <div>
      <ChildVue @click="message"></ChildVue>
    </div>
  </div>
</template>

<script>
import ChildVue from "./ChildVue.vue";
import CustomButtonVue from "./CustomButtonVue.vue";
export default {
  components: {
    CustomButtonVue,
    ChildVue,
  },
  created() {
    console.log(this.$attrs);
  },
  methods: {
    message() {
      alert("父组件事件1");
    },
  },
};
</script>

<style>
.bigSize {
  font-size: 24px;
}
</style>
